<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>业务处理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">


</head>

<body>
<div id="functionadd">

<!--    内容-->
    <div style="color: black; font-size: 20px; margin: 10px 0">功能添加</div>
    <div style=" height: 1px; background-color: white"></div>


    <div style="width: 500px; margin: 20px; border-radius: 10px;float: left">
        <!--                    <button @click="con">button</button>-->
<!--        background-color: #99abb4;？-->
        <div style="margin-top: 25px;  width: 100%; border-radius: 20px;height: 320px;">
            <div style=" margin-left:20px;height: 1px; background-color: white"></div>
            <div style="margin-left: 25px">
                <div style="margin-top: 25px">
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="/funcadd"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload="true">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传zip压缩文件</div>
                    </el-upload>

                </div>




            </div>



        </div>


    </div>

    <!--                <div style="width: 700px;background-color: #99abb4;margin-top:45px;height: 325px;float: bottom;border-radius: 20px">-->
    <!--                    <span>预留区域二</span>-->


    <!--                </div>-->
</div>

</body>
<script src="../../js/vue.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>

<script type="text/javascript">
<!--    js内容 -->
new Vue({
    el: "#functionadd",
    data(){
        return {
            user: {},
            isCollapse: false,
            fileList: [],
        }
    } ,
    mounted() {
        this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
    },
    methods: {
        con(){
            console.log(this.user.username);
        },
        handleCollapse() {

            this.isCollapse = !this.isCollapse;
        },
        submitUpload() {
            this.$refs.upload.submit();
            this.fileList = [];


        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }



    }
})


</script>



</html>